<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>发现</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../css/swiper.min.css"/>
    <style>
        .find{  padding:0; }
        .content{padding: 10px 15px 0}
        .content .tab{width: 100%;padding-bottom: 16px;}
        .content .tab span{padding-bottom: 10px;color: #939393;font-size: 15px}
        .content .tab span.hot{margin-right: 20px}
        .content .tab span.active{border-bottom: 2px solid #000;color: #000;font-size: 18px}
        .cow .box{width: 220px;height:105px;display: flex;flex-direction: column;justify-content: space-around;border-radius: 5px}
        .cow .box.pic1{background: url('../image/term.png') no-repeat;background-size: 100% 105px;}
        .cow .box.pic2{background: url('../image/basic.png') no-repeat;background-size: 100% 105px;}
        .cow .box .title{font-size: 16px;color: #FFFFFF;font-weight: 600;margin: 0 10px}
        .cow .box .desc{display: flex;justify-content: space-between;align-items: center;color: #fff;margin: 0 10px}
        .cow .box .desc .day span{font-size: 24px;font-weight: 600}
        .among{display: flex;justify-content: space-between;align-items: center;padding: 20px 0}
        .among .week{font-weight: 600;font-size: 18px;color: #000;}
        .among .full{color: #999}
        .list{width: 100%;display: none}
        .list.active{display: block;}
        .list .wrap{display: flex;flex-direction: column;justify-content: space-around;padding-bottom: 28px}
        .list .wrapL:last-child{padding-bottom: 15px}
        .list .wrap .item{display: flex;align-items: center;justify-content: space-between;}
        .list .wrap .item .title{font-size: 16px;color: #000;font-weight: 600;overflow: hidden;
text-overflow: ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;}
        .list .wrap .item  .serial{width: 40px;height: 17px;line-height: 17px;font-size: 12px;color: #fff;border-top-left-radius: 8px;display: inline-block;text-align: center;margin-right: 5px}
        .list .wrap .item .serial.num1{background-color: #FFBA0D;}
        .list .wrap .item .serial.num2{background-color: #A7B1BA;}
        .list .wrap .item .serial.num3{background-color: #DC7B62;}
        .list .wrap .item .serial.num4{background-color:  #5D6FFF;}
        .list .wrap .item .money{ color: #EB5758;flex-shrink:0}
        .list .wrap .item .money .redfont{font-size: 24px}
        .list .wrap .item.self{justify-content: flex-start;margin-bottom: 5px}
        .list .wrap .item.self span{padding: 3px 9px;color:  #8B8EA3;font-size: 11px;border-radius: 5px;background-color:  #E4E7F0;display: inline-block;margin-right: 10px}
        .list .wrap .item .target{color: #999}
        .list .wrap .item .type{color: #999;flex-shrink: 0}
        .weeked{width: 100%;}
        .weeked .post{font-weight: 600;font-size: 18px;color: #000;padding-bottom: 20px}
        .boxs{padding-bottom: 20px}
        .boxs .box{width: 148px;height: 105px;background: #FFFFFF;box-shadow: 0 2px 4px 0 rgba(144,147,164,0.40);display: flex;flex-direction: column;justify-content: space-around;}
        .boxs .box .title{overflow: hidden;text-overflow: ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;margin: 0 10px}
        .boxs .box .design{display: flex;align-items: center;margin-left: 10px}
        .boxs .box .design span{padding: 3px 9px;color:  #8B8EA3;font-size: 11px;border-radius: 5px;background-color:  #E4E7F0;margin-right: 10px}
        .boxs .box .day{font-size: 13px;color: #999;margin-left: 10px}
        .boxs .box .day span{font-size: 20px;font-weight: 600;color: #EB5758;}
    </style>
</head>
<body>
    <div class="find">
      <div class="content">
        <div class="tab">
          <span class="hot active" onclick="tagBtn( this );">推荐</span>
          <span class="new" onclick="tagBtn( this );">全部</span>
        </div>

        <div class="list active" >
          <div class="cow swiper-container" id="cow">
            <div class="swiper-wrapper" id="top">
                <!-- <div  class="box swiper-slide pic1">
                  <div class="title">高级兼职日赚500元+，行动把握未来</div>
                  <div class="desc"><div class="day"><span>800 </span>元/天</div> <div>产期</div></div>
                </div>
                <div  class="box swiper-slide pic2">
                  <div class="title">高级兼职日赚500元+，行动把握未来</div>
                  <div class="desc"><div class="day"><span>800 </span>元/天</div> <div>产期</div></div>
                </div> -->
            </div>
          </div>
          <div class="among">
            <span class="week">每周职位</span>
            <span class="full">完整排行 ></span>
          </div>


          <div id="weeked">

            <!-- <div class="wrap">
              <div class="item self">
                <div class="serial num4">NO.4</div>
                <div class="title">全新网络在线高薪兼职，简单立结！</div>
              </div>
              <div class="item self">
                <span class="sex">男女不限</span>
                <span>长期</span>
                <span>日结</span>
              </div>
              <div class="item">
                <div class="target">南京主流艺术培训有限公司</div>
                <div class="money"><span class="redfont">800 </span>元/天</div>
              </div>
            </div> -->
          </div>
          <div class="weeked">
            <div class="post">更多推荐</div>
            <div class="boxs swiper-container" id="boxs">
              <div class="swiper-wrapper" id="bottom">
                  <!-- <div  class="box swiper-slide">
                    <div class="title">高级兼职日赚500元+，行动把握未来</div>
                    <div class="design">
                      <span>长期</span>
                      <span>日结</span>
                    </div>
                    <div class="day"><span>800 </span>元/天</div>
                  </div> -->

              </div>
            </div>
          </div>
        </div>
        <div class="list" id="new">



          <!-- <div class="wrap">
            <div class="item">
              <div class="title">全新网络在线高薪兼职，简单立结1111！</div>
              <div class="money"><span class="redfont">800 </span>元/天</div>
            </div>
            <div class="item self">
              <span class="sex">男女不限</span>
              <span>长期</span>
            </div>
            <div class="item">
              <div class="target">南京主流艺术培训有限公司</div>
              <div class="type">日结</div>
            </div>
          </div> -->

        </div>
      </div>
    </div>
</body>
</html>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/swiper.min.js"></script>
<script type="text/javascript" src="../script/encrypt.js"></script>
<script type="text/javascript">
  apiready = function () {
    $api.fixStatusBar( $api.dom('.find') );
    $api.addEvt($api.dom('.full'), 'click', function(){
      api.openWin({
          name: 'weekedList',
          url: './weekedList.html'
      });

    });

    var base = new Base64();
    var json = {'tagCode':'FXPH'} //每周排行
    var parameter = base.encode(JSON.stringify(json));
    var signValue = parameter + secretKey
    var sign = signValue.MD5(32)
    $api.post(url+'getJobListByCode.ashx', {values:{parameter:parameter,sign:sign}}, function(ret){
      if(ret.code == 200){
        // alert($api.jsonToStr(ret.data))
        var html = '';
        var data = ret.data.JobList;

        for (var i = 0,iL=data.length; i < iL; i++) {
          if(i < 4){
            html+='<div class="wrap" data-id="'+data[i].jianZhiID+'">'+
            '<div class="item self">'+
            '<div class="serial num'+(i+1)+'">NO.'+(i+1)+'</div>'+
            '<div class="title">'+data[i].listTitle+'</div>'+
            '</div>'+
            '<div class="item self">'
            if(data[i].sex == 10){ //性别要求
              html+='<span class="sex">仅限男</span>'
            }else if(data[i].sex == 20){
              html+='<span class="sex">仅限女</span>'

            }else if(data[i].sex == 30){
              html+='<span class="sex">男女不限</span>'
            }
            if(data[i].effective == 10){ //有效时间
              html+='<span>长期</span>'
            }
            if(data[i].paymentTerms == 10){ //结算方式
              html+='<span>日结</span>'
            }else if(data[i].paymentTerms == 20){
              html+='<span>周结</span>'
            }else if(data[i].paymentTerms == 30){
              html+='<span>月结</span>'
            }

            html+='</div>'+
            '<div class="item">'+
            '<div class="target line1">'+data[i].detailContent+'</div>'+
            '<div class="money"><span class="redfont">'+data[i].salary+' </span>'
            if(data[i].salaryUnit == 10){
              html+='元/小时</div>'
            }else if(data[i].salaryUnit == 20){
              html+='元/天</div>'
            }else if(data[i].salaryUnit == 30){
              html+='元/次</div>'
            }

            html+='</div>'+
            '</div>'

          }

        }
        $api.html($api.dom('#weeked'), html);

        var wrapList = $api.domAll('.wrap');
        for (var i = 0; i < wrapList.length; i++) {
          $api.addEvt(wrapList[i], 'click', function(){
            var jianZhiID = $api.attr(this,'data-id')
            api.openWin({
              name: 'jobDetails',
              url: './jobDetails.html',
              pageParam:{
                jianZhiID:jianZhiID
              }
            });

          });
        }

      }else{
        api.toast({
          msg: ret.msg,
          duration: 2000,
          location: 'middle'
        });
      }
    })

    var jsons = {'tagCode':'FXSG'} //上部滚动
    var parameters = base.encode(JSON.stringify(jsons));
    var signValues = parameters + secretKey
    var signs = signValues.MD5(32)
    $api.post(url+'getJobListByCode.ashx', {values:{parameter:parameters,sign:signs}}, function(ret){
      if(ret.code == 200){

        // alert($api.jsonToStr(ret.data))
        var html = ''
        var data = ret.data.JobList;
        for (var i = 0; i < data.length; i++) {
          if(i%2 == 0){
            html+='<div  class="box swiper-slide pic1" data-id="'+data[i].jianZhiID+'">'
          }else if(i%2 == 1){
            html+='<div  class="box swiper-slide pic2" data-id="'+data[i].jianZhiID+'">'
          }
          html+='<div class="title">'+data[i].listTitle+'</div>'+
          '<div class="desc"><div class="day"><span>'+data[i].salary+' </span>'
          if(data[i].salaryUnit == 10){
            html+='元/小时</div>'
          }else if(data[i].salaryUnit == 20){
            html+='元/天</div>'
          }else if(data[i].salaryUnit == 30){
            html+='元/次</div> '
          }
          if(data[i].effective == 10){ //有效时间
            html+='<div>长期</div></div>'
          }
          html+='</div>'
        }
        $api.html($api.dom('#top'), html);

        var swiper = new Swiper('#cow', {
          slidesPerView: 1.5,
          spaceBetween: 15,
          freeMode: true,
          centeredSlides : true,
          centeredSlidesBounds: true
        });
        var wrapList = $api.domAll('.box');
        for (var i = 0; i < wrapList.length; i++) {
          $api.addEvt(wrapList[i], 'click', function(){
            var jianZhiID = $api.attr(this,'data-id')
            api.openWin({
              name: 'jobDetails',
              url: './jobDetails.html',
              pageParam:{
                jianZhiID:jianZhiID
              }
            });

          });
        }

      }else{
        api.toast({
          msg: ret.msg,
          duration: 2000,
          location: 'middle'
        });
      }
    })

    var jsonss = {'tagCode':'FXXG'} //下部滚动
    var parameterss = base.encode(JSON.stringify(jsonss));
    var signValuess = parameterss + secretKey
    var signss = signValuess.MD5(32)
    $api.post(url+'getJobListByCode.ashx', {values:{parameter:parameterss,sign:signss}}, function(ret){
      if(ret.code == 200){
        // alert($api.jsonToStr(ret.data))
        var html = ''
        var data = ret.data.JobList;
        for (var i = 0; i < data.length; i++) {
          html+='<div  class="box swiper-slide" data-id="'+data[i].jianZhiID+'">'+
            '<div class="title">'+data[i].listTitle+'</div>'+
            '<div class="design">'
            if(data[i].effective == 10){ //有效时间
              html+='<span>长期</span>'
            }
            if(data[i].paymentTerms == 10){ //结算方式
              html+='<span>日结</span>'
            }else if(data[i].paymentTerms == 20){
              html+='<span>周结</span>'
            }else if(data[i].paymentTerms == 30){
              html+='<span>月结</span>'
            }

            html+='</div>'+
            '<div class="day"><span>'+data[i].salary+' </span>'
            if(data[i].salaryUnit == 10){ //薪水单位
              html+='元/小时</div>'
            }else if(data[i].salaryUnit == 20){
              html+='元/天</div>'
            }else if(data[i].salaryUnit == 30){
              html+='元/次</div>'
            }

          html+='</div>'
        }
        $api.html($api.dom('#bottom'), html);

        var swiper = new Swiper('#boxs', {
          slidesPerView: 2.2,
          spaceBetween: 10,
          freeMode: true,
          centeredSlides : true,
          centeredSlidesBounds: true
        });
        var wrapList = $api.domAll('.box');
        for (var i = 0; i < wrapList.length; i++) {
          $api.addEvt(wrapList[i], 'click', function(){
            var jianZhiID = $api.attr(this,'data-id')
            api.openWin({
              name: 'jobDetails',
              url: './jobDetails.html',
              pageParam:{
                jianZhiID:jianZhiID
              }
            });

          });
        }

      }else{
        api.toast({
          msg: ret.msg,
          duration: 2000,
          location: 'middle'
        });
      }
    })
    refersh()//下拉刷新
    all(1)//加载全部
    var b = 0
    var pi = 1
    var arryHtml = []
    function all(pi){
      var pz = 20;
      var json = {'pi':pi,'pz':pz} //全部
      var parameter = base.encode(JSON.stringify(json));
      var signValue = parameter + secretKey
      var sign = signValue.MD5(32)

      $api.post(url+'getJobAllList.ashx', {values:{parameter:parameter,sign:sign}}, function(ret){
        if(ret.code == 200){
          // alert($api.jsonToStr(ret.data))
          var html = '';

          var data = ret.data.JobList;

          b = data.length

          if(!data.length){
            b = 0
          }
          if(b > 0){
            arryHtml = arryHtml.concat(data)
            for (var i = 0,iL=arryHtml.length; i < iL; i++) {
              html+='<div class="wrap" data-id="'+arryHtml[i].jianZhiID+'">'+
              '<div class="item">'+
              '<div class="title">'+arryHtml[i].listTitle+'</div>'+
              '<div class="money"><span class="redfont">'+arryHtml[i].salary+'</span>'

              if(arryHtml[i].salaryUnit == 10){ //薪水单位
                html+='元/小时</div>'
              }else if(arryHtml[i].salaryUnit == 20){
                html+='元/天</div>'
              }else if(arryHtml[i].salaryUnit == 30){
                html+='元/次</div>'
              }

              html+='</div>'+
              '<div class="item self">'

              if(arryHtml[i].sex == 10){ //性别要求
                html+='<span class="sex">仅限男</span>'
              }else if(arryHtml[i].sex == 20){
                html+='<span class="sex">仅限女</span>'

              }else if(arryHtml[i].sex == 30){
                html+='<span class="sex">男女不限</span>'
              }

              if(arryHtml[i].effective == 10){ //有效时间
                html+='<span>长期</span>'
              }

              html+='</div>'+
              '<div class="item">'+
              '<div class="target line1">'+arryHtml[i].detailContent+'</div>'

              if(arryHtml[i].paymentTerms == 10){ //结算方式
                html+='<div class="type">日结</div>'
              }else if(arryHtml[i].paymentTerms == 20){
                html+='<div class="type">周结</div>'
              }else if(arryHtml[i].paymentTerms == 30){
                html+='<div class="type">月结</div>'
              }
              html+='</div>'+
              '</div>'

            }

          }
          $api.html($api.dom('#new'), html);

          var wrapList = $api.domAll('.wrap');
          for (var i = 0; i < wrapList.length; i++) {
            $api.addEvt(wrapList[i], 'click', function(){
              var jianZhiID = $api.attr(this,'data-id')
              api.openWin({
                name: 'jobDetails',
                url: './jobDetails.html',
                pageParam:{
                  jianZhiID:jianZhiID
                }
              });

            });
          }

        }else{
          api.toast({
            msg: ret.msg,
            duration: 2000,
            location: 'middle'
          });
        }
      })
    }
    api.addEventListener({
        name:'scrolltobottom',
        extra:{
            threshold:20           //设置距离底部多少距离时触发，默认值为0，数字类型
        }
    }, function(ret, err){

      if (b <20 ) {
            $api.append($api.dom('#new'),'<div class="nomore">没有更多了~</div>')
            api.removeEventListener({
                name: 'scrolltobottom'
            });
        } else {
            pi+=1;
            all(pi)
        }
    });

  }
  function tagBtn(tag){

    if( tag == $api.dom('.tab span.active') )return;
    var eFootLis = $api.domAll('.tab span'),
    eHeaderLis = $api.domAll('.list'),
    index = 0;
    
    for (var i = 0,len = eFootLis.length; i < len; i++) {
      if( tag == eFootLis[i] ){
        index = i;
      }else{
        $api.removeCls(eFootLis[i], 'active');
        $api.removeCls(eHeaderLis[i], 'active');
      }
    }
    $api.addCls( eFootLis[index], 'active');
    $api.addCls( eHeaderLis[index], 'active');
  }


</script>
